<template>
	<view class="custom-navbar">
		<view class="back-icon" @click="goBack()">
			<img src="../../static/民族风-返回.png" alt="" class="icon" />
		</view>
		<text class="custom-title">注册</text>
	</view>
	<div class="container">
		<common-title>
			<template #name>
				注册中心
			</template>
			<template #custom>

			</template>
		</common-title>
		<view class="uni-common-mt">
			<view class="uni-form-item uni-column user-input">
				<view class="title">姓名</view>
				<view class="input">
					<input class="uni-input" maxlength="10" placeholder="请输入真实姓名" v-model="person.name"
						@blur="nameBlur" />
				</view>
			</view>
			<view class="fenjie"></view>
			<view class="uni-form-item uni-column user-input">
				<view class="title">账号</view>
				<view class="input">
					<input class="uni-input" maxlength="30" placeholder="请自定义一个账号" v-model="person.username" />
				</view>
			</view>
			<view class="fenjie"></view>
			<view class="uni-form-item uni-column user-input">
				<view class="title">密码</view>
				<view class="input">
					<input class="uni-input" maxlength="20" placeholder="请输入密码" v-model="person.password" />
				</view>
			</view>
			<view class="fenjie"></view>
			<view class="uni-form-item uni-column user-input">
				<view class="title">邮箱</view>
				<view class="input">
					<input class="uni-input" type="text" maxlength="30" placeholder="请输入邮箱" v-model="person.email"
						@blur="emailBlur" />
				</view>
			</view>
			<view class="fenjie"></view>
			<view class="uni-form-item uni-column user-input">
				<view class="title">职业</view>
				<view class="input">
					<input class="uni-input" maxlength="50" placeholder="请输入职业" v-model="person.career" />
				</view>
			</view>
			<view class="fenjie"></view>
			<view class="uni-form-item uni-column user-input">
				<view class="title">单位</view>
				<view class="input">
					<input class="uni-input" maxlength="30" placeholder="请输入单位" v-model="person.organization" />
				</view>
			</view>
			<view class="fenjie"></view>
			<view class="uni-form-item uni-column user-input">
				<view class="title">年龄</view>
				<view class="input">
					<input class="uni-input" maxlength="2" placeholder="请输入年龄" v-model="person.age" />
				</view>
			</view>
			<view class="fenjie"></view>
			<view class="uni-form-item uni-column user-input">
				<view class="title">手机号</view>
				<view class="input">
					<input class="uni-input" maxlength="200" placeholder="请输入手机号" v-model="person.phone"
						@blur="phoneBlur" />
				</view>
			</view>
			<view class="fenjie"></view>
		</view>
		<button class="up-button" @click="register">注册</button>
	</div>
</template>

<script setup>
	import {
		reactive
	} from 'vue'
	import {
		apiRegister
	} from '../../api/user.js'
	// 用户的注册信息
	const person = reactive({
		username: '', // 用戶賬號
		name: '', // 用戶名
		password: '', // 用戶設置的密碼
		phone: '', // 用戶綁定的手機號
		email: '', // 郵箱
		career: '', // 職業
		organization: '', // 單位
		age: '' //年齡
	})

	const register = async () => { // 調用用戶注冊的api接口，將用戶注冊的信息提交到後臺
		for (let key in person) { //	若用户未填写所有信息，弹框提醒用户填写所有信息

			if (person[key] === '') {
				uni.showToast({
					title: "请填写所有信息",
					icon: 'error',
					duration: 2000
				})
				return
			}
		}
		if (!validateName(person.name)) {
			uni.showToast({
				title: '姓名格式有误',
				icon: 'error',
				duration: 2000,
			});
			return
		}

		if (!validatePhone(person.phone)) {
			uni.showToast({
				title: '手机号格式有误',
				icon: 'error',
				duration: 2000
			});
			return
		}

		if (!validateEmail(person.email)) {
			uni.showToast({
				title: '邮箱格式有误',
				icon: 'error',
				duration: 2000
			});
			return
		}

		person.age = Number(person.age) // 将年龄转换为数字类型
		const res = await apiRegister(person)
		console.log(res)
		if (res.code === 1) {
			uni.showToast({
				title: res.data,
				icon: 'success',
				duration: 2000
			})
			// 跳轉頁面
			uni.redirectTo({
				url: '/pages/login/login',
			})

		} else {
			uni.showToast({
				title: res.data,
				icon: 'error',
				duration: 2000,
			})
		}
	}
	const validateName = (name) => {
		const nameRegex = /^[\u4E00-\u9FA5]{2,10}(·[\u4E00-\u9FA5]{2,10}){0,2}$/;
		return nameRegex.test(name);
	}
	const validatePhone = (phone) => {
		const phoneRegex = /^(13[0-9]|14[1579]|15[0-3,5-9]|16[6]|17[0123456789]|18[0-9]|19[89])\d{8}$/;
		return phoneRegex.test(phone);
	}

	const validateEmail = (email) => {
		const emailRegex = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
		return emailRegex.test(email);
	}

	const nameBlur = () => {
		if (person.name != '' && !validateName(person.name)) {
			uni.showToast({
				title: '姓名格式有误',
				icon: 'error',
				duration: 2000,
			});
		}
	}

	const phoneBlur = () => {
		console.log(person)
		if (person.phone != '' && !validatePhone(person.phone)) {
			uni.showToast({
				title: '手机号格式有误',
				icon: 'error',
				duration: 2000
			});
		}
	}

	const emailBlur = () => {
		if (person.email != '' && !validateEmail(person.email)) {
			uni.showToast({
				title: '邮箱格式有误',
				icon: 'error',
				duration: 2000
			});
		}
	}
	
	const goBack= () => {
		uni.showModal({
			title: '提示',
			content: '是否退出注册页面',
			success: function (res) {
				if (res.confirm) {
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}
			}
		})
	}
</script>

<style scoped>
	.custom-navbar {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 80px;
		/* 导航栏高度 */
		background-color: #00BFFF;
		display: flex;
	
		justify-content: center;
		color: white;
		z-index: 999;
	
	}
	
	.icon {
		position: absolute;
		height: 80rpx;
		width: 80rpx;
		margin-top: 40px;
		margin-left: 10px;
	
	}
	
	.custom-title {
		font-size: 20px;
		/* 设置你想要的大小 */
		margin-top: 45px;
		font-weight: bold;
		margin-left: auto;
		/* 使标题向右对齐 */
		margin-right: auto;
		/* 使标题向左对齐，与 margin-left: auto 配合实现居中 */
	}
	
	.container {
		margin-top: 140rpx;
		padding-top: 30rpx;
	}

	.user-input {
		width: 335px;
		margin: 20px auto;
		display: flex;
	}

	.user-input .title {
		width: 80px;
		text-align: left;
		line-height: normal;
	}

	.user-input .input {
		margin-left: 0;
		flex: 1;
	}


	.fenjie {
		width: 335px;
		height: 1px;
		background: #ddd;
		margin: 0 auto;
	}

	.up-button {
		width: 160px;
		height: 40px;
		background: #488ac7;
		border-radius: 4px;
		font-size: 16px;
		line-height: 40px;
		color: white;
		margin-top: 30rpx;
	}
</style>